<template>
  <div>
    <lyg-nav></lyg-nav>
    <waves></waves>
    <div class="container">
      <el-row :gutter="30">
        <el-col :sm="24" :md="16" style="transition: all .5s ease-out; margin-bottom: 30px; margin-top: 50px">
          <div class="card-title">文章标签</div>
          <el-card class="card" :body-style="{ borderRadius: '10px', padding: '20px', minHeight: '300px' }">
            <div class="bbb">
              <div class="tag-wrapper" v-for="(tag, index) in tagList" :key="index">
                <a @click="toOtherPage(tag.id, tag.name)" class="tag-item" :style="{ fontSize: tag.fontSize, color: tag.color, backgroundColor: tag.backgroundColor }">
                  {{ tag.name }} <sup>{{ tag.tagNum }}</sup>
                </a>
              </div>
            </div>
          </el-card>
        </el-col>
        <el-col :sm="24" :md="8">
          <RightList></RightList>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import header from '@/components/header.vue';
import RightList from '../../components/rightlist.vue';
import { getTagListNum } from '../../api/category/category';

export default {
  name: 'hello',
  components: {
    'lyg-nav': header,
    RightList,
  },
  data() {
    return {
      msg: 'Welcome to kalacloud.com',
      tagList: [],
    };
  },
  mounted() {
    this.getTagList();
  },
  computed: {
    // 计算每个标签的字体大小
    fontSizeStyle() {
      return this.tagList.map(tag => ({
        fontSize: `${1 + tag.count * 0.4}rem`,
      }));
    },
  },
  methods: {
    toOtherPage(id, name) {
      this.$router.push({
        path: '/ArticleTag',
        query: { id, name },
      });
    },
    async getTagList() {
      try {
        this.tagList = await getTagListNum();
        this.generateColors();
      } catch (error) {
        console.error('Failed to fetch tag list:', error);
      }
    },
    // 生成标签随机颜色
    generateColors() {
      this.tagList.forEach(tag => {
        tag.color = this.getRandomColor();
        tag.backgroundColor = this.getRandomColor();
      });
    },
    // 获取随机颜色
    getRandomColor() {
      const r = Math.floor(Math.random() * 256);
      const g = Math.floor(Math.random() * 256);
      const b = Math.floor(Math.random() * 256);
      return `rgb(${r}, ${g}, ${b})`;
    },
  },
};
</script>

<style scoped>
.container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: flex-start; /* 垂直上方对齐 */
  height: 200px;
}

.card-title {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 20px;
}

.card {
  border: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.bbb {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center; /* 垂直居中 */
  margin-top: 120px;
}

.tag-item {
  font-size: 18px;
  margin: 0 10px 10px 0; /* 调整间距 */
  padding: 10px 20px; /* 添加内边距 */
  border-radius: 30px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.tag-item:hover {
  background-color: rgba(0, 0, 0, 0.1);
}
</style>
